<!DOCTYPE html>
<html>
<head>
	<title>参赛名单</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/common.css?v={$WST_V}">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/book.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/MemoryCup/Entrylist.css" type="text/css">
</head>
<body>
<div>
	<h1>参赛名单</h1>
	<div class="Head">
		<span>参赛姓名</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>学校名称</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>作品名称</span>
	</div>
</div>
<div>
	
</div>
<div class="Body" id="B1">
	<!--<ul>
		<li>鲁班</li>
		<li>春秋大学</li>
		<li>鲁班七号</li>
	</ul>
	<ul>
		<li>鲁班</li>
		<li>春秋大学</li>
		<li>鲁班七号</li>
	</ul>
	<ul>
		<li>鲁班</li>
		<li>春秋大学</li>
		<li>鲁班七号</li>
	</ul>-->
	
</div>
<div id="pages"> 
		
	</div>
	
	<include file="__ROOT__Apps/WebApp/View/default/common_footer.html" />
</body>
<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/ajax.js"></script>
<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js"></script>
<script>
	function loadProducts(pno=0){
	//(反复被调用)
	$.ajax({
		type: "get",//数据发送的方式（post 或者 get）
			url: " {:U('WxBooks/match')}",//要发送的后台地址
			data:{'pno':pno},//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
			dataType: "json",//后台处理后返回的数据格式
			success:output=>{
				console.log(output);
		var data=output.data;
		var html="";
		for(var p of data){
			html+=
				`<ul>
				<li> ${p.realname }</li>
				<li> ${p.college }</li>
				<li>${p.bookname }</li>
				</ul>`
		}
		$("#B1").html(html);
		var pageCount=output.pageCount,
		 pageNo=output.pno;
	 	console.log(pageNo);
            var lis="";
            for(var i=0;i<pageCount;i++){
                lis+=(i!=pageNo?
                	`<a href="#">${i+1}</a>`:
                    `<a href="#" class="current">${i+1}</a>`
                    );
            }
            var htmlCon=
                `<a href="#" class="previous">上一页</a>${
                    lis
                    }<a href="#" class="next">下一页</a>`;
            var divPages=$("#pages");
            divPages.html(htmlCon);
            if(pageCount==0){
                divPages.find("a:first").addClass("previous disabled");
                divPages.find("a:last").addClass("previous disabled");
            }
            if(pageNo==0){
                divPages.find("a:first").addClass("previous disabled");
            }else if(pageNo==pageCount-1){
                divPages.find("a:last").addClass("next disabled");
            }else{
                divPages.find("a:first").addClass("previous");
                divPages.find("a:last").addClass("next");
            }
            /*为页码绑定点击事件*/
            divPages.on("click","a",function (e) {
                e.preventDefault();
                var pno=$(this).html();
                if(!isNaN(pno)){
                    loadProducts(pno-1);
                }
            })
            /*为上下页绑定事件*/
            var prev=$("#pages>a:first");
            var next=$("#pages>a:last");
            prev.click(function(e){
                e.preventDefault();
                var that=$(this);
                if(!that.hasClass("disabled")){
                    var curr=$(".current");
                    loadProducts(curr.html()-2);
                }
            })
            next.click(function(e){
                e.preventDefault();
                var that=$(this);
                if(!that.hasClass("disabled")){
                    var curr=$(".current");
                    loadProducts(curr.html());
                }
            })
		}
  })
};
loadProducts();
</script>

</html>
